<%--
  User: yang
  Date: 8/26/20
  Time: 14:45
  Description: TODO 
--%>
<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- 导入核心标签库 --%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>展示考试成绩</title>
    <%--  新 Bootstrap 核心 CSS 文件 --%>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
    <%--  导入 jQuery   --%>
    <%--  最新的 Bootstrap 核心 JavaScript 文件   --%>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">


    <script type="text/javascript">
        //文档加载成功  通过ajax访问数据库获取所有考试对象  把考试对象啊加入select中
        $(function () {
            $.ajax({
                data: "time=" + Math.random(),
                dataType: "json",
                async: true,
                type: "GET",
                url: "<c:url value='/exam/getAll.action'/>",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var $option = $("<option value='" + data[i].eid + "'>" + data[i].ename + "</option>");
                        $("select[name='sel_exam']").append($option);
                    }
                }
            });
            //给select注册事件
            $("select[name='sel_exam']").bind("change", function () {
                var eid = this.value;
                if (eid) {
                    //拿着值去找action获取本次考试的所有学生的分数
                    $.ajax({
                        data: "eid=" + eid,
                        dataType: "json",
                        async: true,
                        type: "GET",
                        url: "<c:url value='/exam/getOneByEid.action'/>",
                        success: function (data) {
                            $("#tab_exam tr:gt(0)").remove();
                            $("#tab_exam caption").remove();
                            //把考试成绩添加到
                            $("#tab_exam").append($("<caption>" + data.ename + "</caption>"));
                            for (var i = 0; i < data.stus.length; i++) {
                                var $tr = $("<tr></tr>");
                                $tr.append("<td>" + (i + 1) + "</tds>");
                                $tr.append("<td>" + data.stus[i].sname + "</tds>");
                                $tr.append("<td>" + data.stus[i].score + "</tds>");
                                $("#tab_exam").append($tr);
                            }
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>

<c:choose>
    <c:when test="${empty sessionScope.stu}">
        <%-- session 为空，去请求       --%>
        <jsp:forward page="index.jsp"/>
    </c:when>

    <c:otherwise>
        <%--   session 不为空，显示     --%>

        <h1 align="center">
                ${stu}
        </h1>
        <div id="div_main">
            <div>
                <select name="sel_exam" style="float: right;margin-right:300px;">
                    <option value="">请选择考试</option>
                </select>
            </div>
            <div>
                <table id="tab_exam">
                    <tr>
                        <th>名次</th>
                        <th>名字</th>
                        <th>分数</th>
                    </tr>
                </table>
            </div>
        </div>


        <input type="button" value="生成文档" id="but_create"/>
        <script type="text/javascript">
            $(function () {
                $("#but_create").bind("click", function () {
                    //通过ajax把考试eid传递给action 在action中生成文档
                    $.ajax({
                        data: "eid=" + $("select[name='sel_exam']").val(),
                        dataType: "text",
                        type: "GET",
                        async: true,
                        url: "<c:url value='/exam/getTextByEid.action'/>",
                        success: function (data) {
                            // alert(data);
                            $("#span_message").text(data);
                        }
                    });
                });
            });
        </script>
        <span id="span_message"></span>


    </c:otherwise>

</c:choose>


</body>
</html>
